import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatRadioModule } from '@angular/material/radio';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSliderModule } from '@angular/material/slider';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTabsModule } from '@angular/material/tabs';
import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatBadgeModule } from '@angular/material/badge';
import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
import { MatDialogModule, MatDialog } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatDividerModule } from '@angular/material/divider';
import { MatStepperModule } from '@angular/material/stepper';
import { MatListModule } from '@angular/material/list';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatChipInputEvent } from '@angular/material/chips';
import { FormControl, ReactiveFormsModule, Validators, FormsModule } from '@angular/forms';
import { ChangeDetectionStrategy, inject } from '@angular/core';
import { ToastService } from '@core/services/toast.service';
import { ToastMessage } from '@shared/models/toast.models';
 
@Component({
  selector: 'cne-material-ui',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    MatButtonModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatCheckboxModule,
    MatRadioModule,
    MatSlideToggleModule,
    MatSliderModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatChipsModule,
    MatIconModule,
    MatToolbarModule,
    MatTabsModule,
    MatMenuModule,
    MatTooltipModule,
    MatBadgeModule,
    MatSnackBarModule,
    MatDialogModule,
    MatExpansionModule,
    MatDividerModule,
    MatStepperModule,
    MatListModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatAutocompleteModule,
    ReactiveFormsModule
  ],
  templateUrl: './material-ui.component.html',
  styleUrl: './material-ui.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MaterialUiComponent {
  // 使用 inject() 函数注入服务
  private snackBar = inject(MatSnackBar);
  private dialog = inject(MatDialog);
  private toastService = inject(ToastService);

  // 表单控件
  nameControl = new FormControl('', [Validators.required]);
  emailControl = new FormControl('', [Validators.required, Validators.email]);
  selectedOption = new FormControl('');
  checkboxValue = false;
  radioValue = 'option1';
  slideToggleValue = false;
  sliderValue = 50;
  
  // 数据
  options = ['选项1', '选项2', '选项3'];
  fruits = ['苹果', '香蕉', '橙子'];
  selectedFruits: string[] = [];
  
  // 表格数据
  displayedColumns = ['name', 'email', 'role', 'status'];
  dataSource = [
    { name: '张三', email: 'zhangsan@example.com', role: '管理员', status: '活跃' },
    { name: '李四', email: 'lisi@example.com', role: '用户', status: '活跃' },
    { name: '王五', email: 'wangwu@example.com', role: '用户', status: '禁用' }
  ];
  
  // 步骤器
  isLinear = false;
  
  // 添加水果
  addFruit(event: MatChipInputEvent): void {
    const value = (event.value || '').trim();
    if (value) {
      this.fruits.push(value);
    }
    event.chipInput!.clear();
  }
  
  // 移除水果
  removeFruit(fruit: string): void {
    const index = this.fruits.indexOf(fruit);
    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }
  
  // 显示提示消息
  showSnackBar(): void {
    this.snackBar.open('这是一个提示消息！', '关闭', {
      duration: 3000,
    });
  }
  
  // 打开对话框
  openDialog(): void {
    this.dialog.open(DemoDialogComponent, {
      width: '400px',
    });
  }
  
  // Toast 测试方法 - 直接使用 Service
  showToastInfo(): void {
    const notification: ToastMessage = {
      message: '这是信息提示',
      type: 'info',
      horizontalPosition: 'center',
      verticalPosition: 'top',
      duration: 3000
    };
    this.toastService.dispatchNotification(notification);
  }
  
  showToastSuccess(): void {
    const notification: ToastMessage = {
      message: '操作成功完成',
      type: 'success',
      horizontalPosition: 'center',
      verticalPosition: 'top',
      duration: 0
    };
    this.toastService.dispatchNotification(notification);
  }
  
  showToastWarn(): void {
    const notification: ToastMessage = {
      message: '这是一个警告提示',
      type: 'warn',
      horizontalPosition: 'center',
      verticalPosition: 'top',
      duration: 4000
    };
    this.toastService.dispatchNotification(notification);
  }
  
  showToastError(): void {
    const notification: ToastMessage = {
      message: '操作失败，请重试',
      type: 'error',
      horizontalPosition: 'center',
      verticalPosition: 'top',
      duration: 5000
    };
    this.toastService.dispatchNotification(notification);
  }
}

// 简单的对话框组件
@Component({
  selector: 'app-demo-dialog',
  template: `
    <h2 mat-dialog-title>示例对话框</h2>
    <mat-dialog-content>
      <p>这是一个使用自定义主题的 Material 对话框。</p>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button mat-dialog-close>取消</button>
      <button mat-button [mat-dialog-close]="true" cdkFocusInitial>确定</button>
    </mat-dialog-actions>
  `,
  standalone: true,
  imports: [MatDialogModule, MatButtonModule]
})
export class DemoDialogComponent {}
